<template>
  <div class="flex h-full">
    <!-- 聊天列表 -->
    <div class="w-80 border-r bg-muted/20 flex flex-col">
      <!-- 搜索栏 -->
      <div class="p-4 border-b">
        <div class="relative">
          <i class="i-mdi-magnify absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-4 h-4" />
          <input
            type="text"
            :placeholder="t('common.search')"
            class="w-full pl-10 pr-4 py-2 bg-background border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent" />
        </div>
      </div>

      <!-- 聊天列表 -->
      <div class="flex-1 overflow-y-auto">
        <div
          v-for="chat in chatList"
          :key="chat.id"
          class="flex items-center gap-3 p-4 hover:bg-accent cursor-pointer border-b">
          <!-- 头像 -->
          <div class="relative">
            <div
              class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-medium">
              {{ chat.name.charAt(0) }}
            </div>
            <div
              v-if="chat.online"
              class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 border-2 border-background rounded-full"></div>
          </div>

          <!-- 聊天信息 -->
          <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between">
              <h3 class="font-medium text-sm truncate">{{ chat.name }}</h3>
              <span class="text-xs text-muted-foreground">{{ chat.time }}</span>
            </div>
            <p class="text-sm text-muted-foreground truncate mt-1">{{ chat.lastMessage }}</p>
          </div>

          <!-- 未读消息 -->
          <div
            v-if="chat.unread > 0"
            class="min-w-[20px] h-5 bg-red-500 text-white text-xs font-medium rounded-full flex items-center justify-center px-1">
            {{ chat.unread > 99 ? '99+' : chat.unread }}
          </div>
        </div>
      </div>
    </div>

    <!-- 聊天内容区域 -->
    <div class="flex-1 flex flex-col">
      <!-- 聊天头部 -->
      <div class="flex items-center justify-between p-4 border-b bg-background">
        <div class="flex items-center gap-3">
          <div
            class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-medium text-sm">
            A
          </div>
          <div>
            <h2 class="font-medium">Alice</h2>
            <p class="text-xs text-muted-foreground">{{ t('chat.typing') }}</p>
          </div>
        </div>

        <div class="flex items-center gap-2">
          <button class="p-2 rounded-lg hover:bg-accent transition-colors" :title="t('chat.send')">
            <i class="i-mdi-phone w-5 h-5" />
          </button>
          <button class="p-2 rounded-lg hover:bg-accent transition-colors" :title="t('chat.send')">
            <i class="i-mdi-video w-5 h-5" />
          </button>
          <button class="p-2 rounded-lg hover:bg-accent transition-colors" :title="t('common.settings')">
            <i class="i-mdi-dots-horizontal w-5 h-5" />
          </button>
        </div>
      </div>

      <!-- 消息区域 -->
      <div class="flex-1 p-4 overflow-y-auto bg-muted/10">
        <div class="space-y-4">
          <!-- 示例消息 -->
          <div class="flex gap-3">
            <div
              class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-medium text-sm">
              A
            </div>
            <div class="flex-1">
              <div class="bg-background rounded-lg p-3 shadow-sm">
                <p class="text-sm">{{ t('chat.placeholder') }}</p>
              </div>
              <span class="text-xs text-muted-foreground mt-1 block">10:30</span>
            </div>
          </div>

          <div class="flex gap-3 justify-end">
            <div class="flex-1 flex justify-end">
              <div class="bg-primary text-primary-foreground rounded-lg p-3 shadow-sm max-w-xs">
                <p class="text-sm">{{ t('chat.thinking') }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="p-4 border-t bg-background">
        <div class="flex items-end gap-3">
          <button class="p-2 text-muted-foreground hover:text-foreground transition-colors" :title="t('common.help')">
            <i class="i-mdi-emoticon-happy w-5 h-5" />
          </button>
          <button class="p-2 text-muted-foreground hover:text-foreground transition-colors" :title="t('file.upload')">
            <i class="i-mdi-attachment w-5 h-5" />
          </button>
          <div class="flex-1">
            <textarea
              :placeholder="t('chat.placeholder')"
              class="w-full p-3 bg-muted/20 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
              rows="1"></textarea>
          </div>
          <button class="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
            {{ t('chat.send') }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { t } from '@/i18n';

interface ChatItem {
  id: string;
  name: string;
  lastMessage: string;
  time: string;
  unread: number;
  online: boolean;
}

const chatList = ref<ChatItem[]>([
  {
    id: '1',
    name: 'Alice',
    lastMessage: t('chat.placeholder'),
    time: '10:30',
    unread: 2,
    online: true
  },
  {
    id: '2',
    name: 'Bob',
    lastMessage: t('chat.thinking'),
    time: '09:15',
    unread: 0,
    online: false
  },
  {
    id: '3',
    name: 'Charlie',
    lastMessage: t('common.success'),
    time: t('time.yesterday'),
    unread: 1,
    online: true
  },
  {
    id: '4',
    name: 'David',
    lastMessage: t('chat.newChat'),
    time: t('time.yesterday'),
    unread: 0,
    online: false
  }
]);
</script>

<style scoped>
/* 自定义样式 */
</style>
